<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null" @add="onAdd" selectedAble
            :query-props="{isSimple: false, showAddBtn: true, defaultExpand: true}">
    <!-- append自定义按钮 -->
    <template v-slot:actionAppend>
      <!--
      <el-button type="danger" icon="el-icon-delete" size="small" @click="onBatchDelete">批量删除</el-button>
      -->
    </template>

    <!-- 表单查询 -->
    <template v-slot:form>
      <el-form-item label="产品编码">
        <el-input v-model="model.code" placeholder="产品编码" clearable />
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="model.name" placeholder="产品名称" clearable />
      </el-form-item>
      <el-form-item label="生产年份">
        <sys-select v-model="model.productYear" :data="yearList" placeholder="生产年份" clearable />
      </el-form-item>
    </template>

    <template v-slot:form-adv>
      <div>
        <el-form-item label="烧制方式">
          <sys-select v-model="model.makeWay" type="makeWay"></sys-select>
        </el-form-item>
        <el-form-item label="溯源码">
          <el-input v-model="model.traceCode" placeholder="溯源码" clearable/>
        </el-form-item>
      </div>
    </template>

    <template v-slot:tools>
      <el-button icon="el-icon-plus" type="primary" size="small" @click="onAdd">新增</el-button>
      <el-button icon="el-icon-delete" type="danger" size="small" @click="onBatchDelete">批量删除</el-button>
      <el-button icon="el-icon-download" type="success" size="small" @click="onDownload">下载模板</el-button>
      <div style="display: inline-block; margin: 0 8px;">
        <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          accept=".xls,.xlsx"
          :on-change="handleFjChange"
          :before-upload="handleFjBeforeUpload"
          :show-file-list="false"
        >
          <el-button icon="el-icon-upload" type="success" size="small">上传数据</el-button>
        </el-upload>
      </div>

      <el-button icon="el-icon-picture-outline" type="primary" size="small" @click="onUpload">导入图片</el-button>
      <el-button type="default" size="small" @click="onPickQr">
        <i class="my-icon icon-qrcode" style="margin-right: 5px; font-size:12px;"/>自定义二维码
      </el-button>
    </template>

    <template v-slot:attachPath="{row}">
      <el-image v-if="row.attachPath" class="img-cell" :src="base + row.attachPath"/>
    </template>

    <template v-slot:qr="{row}">
      <span style="cursor: pointer;">
        <vue-qr class="img-cell" preview="1" :preview-text="row.name" :text="getText(row)" :size="200" />
      </span>
    </template>

    <template v-slot:ctrl="{row}">
      <el-button type="text" icon="el-icon-edit" @click="onEdit(row)">编辑</el-button>
      <el-button type="text" icon="el-icon-remove" class="btn-danger" @click="onDelete(row)">删除</el-button>
    </template>

  </sys-page>
</template>
<script>
import { Loading } from 'element-ui'
import {NGINX_HOST, h5Path} from '@/constant'
import {postProductList, postProductDelete} from '$my/code/api/nfy-product'
import edit from './edit'
import uploadPanel from './upload-panel'
import qrPanel from './qr-panel'

import dao from '@/components/common/file/uploadAction'
import vueQr from 'vue-qr'
import date from '$ui/utils/date'

function getColumns() {
  return [
    {type: 'selection', align: 'center'},
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'code', label: '产品编码', align: 'center', minWidth: 120, showOverflowTooltip: true, display: true},
    {prop: 'name', label: '产品名称', align: 'center', minWidth: 180, showOverflowTooltip: true, display: true},
    {prop: 'attachPath', label: '图片', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'traceCode', label: '溯源码', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'productYear', label: '生产年份', align: 'center', width: 80, showOverflowTooltip: true, display: true},
    {prop: 'makeWay', label: '烧制方式', align: 'center', width: 80, showOverflowTooltip: true, display: true},
    {prop: 'qr', label: '二维码(当前日期)', align: 'center', width: 150},
    {prop: 'ctrl', label: '操作', width: 210, fixed: 'right', align: 'center'}
  ]
}

export default {
  name: 'list',
  components: {
    vueQr
  },
  data() {
    return {
      base: NGINX_HOST,
      model: {
        code: '',
        name: '',
        productYear: '',
        makeWay: '',
        traceCode: ''
      },
      columns: getColumns(),
      yearList: []
    }
  },
  methods: {
    buildYear() {
      const list = []
      let year = new Date().getFullYear();

      let len = 10
      while (len > 0) {
        list.push({label: year, value: year})
        year--
        len--
      }

      this.yearList = list
    },
    reload() {
      this.$refs.page.reload()
    },
    loader(model) {
      const param = {
        sidx: 'id',
        order: 'desc',
        ...model
      }
      const rs = postProductList(param)

      setTimeout(_ => {
        this.$nextTick(_ => {
          this.$previewRefresh()
        })
      }, 800)

      return rs
    },
    onAdd() {
      this.$refs.page.setDialog({
        title: '新增',
        comp: edit,
        props: {}
      })
    },
    onEdit(row) {
      const {id} = row
      this.$refs.page.setDialog({
        title: '修改',
        comp: edit,
        props: {
          id: id
        }
      })
    },
    onDelete(row) {
      this.doDelete([row.id])
    },
    onBatchDelete() {
      const shopList = this.$refs.page.shopList
      if (shopList.length === 0) {
        this.$message.warning('请先勾选数据！')
        return
      }
      const ids = shopList.map(o => o.id)
      this.doDelete(ids)
    },
    doDelete(ids) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postProductDelete(ids).then(_ => {
          this.$notify.success('删除成功!')
          this.$refs.page.shopList = []
          this.$refs.page.reload()
        })
      })
    },
    onDownload() {
      window.location.href = '/template/template.xlsx'
    },
    onUpload() {
      this.$refs.page.setDialog({
        title: '导入图片',
        width: '50%',
        comp: uploadPanel
      })
    },
    handleFjBeforeUpload() {
      return false
    },
    handleFjChange(file) {
      const params = {
        fileName: file.name,
        file: file.raw,
        fileType: file.raw.type
      }

      const loadingInstance = Loading.service();
      dao.upload(params, '/nfy/product/uploadExcel').then(res => {
        loadingInstance.close()
        this.$notify.success('上传成功')
        this.reload()
      }).catch(e => {
        loadingInstance.close()
        this.$notify.warning('上传失败!')
        console.error(e)
      })
    },
    getText(row) {
      const origin = window.location.origin
      const dateStr = date(new Date(), 'yyyy.MM.dd')

      const params = 'id=' + row.id + '&date=' + dateStr
      const text = origin + h5Path + '?' + params
      return text
    },
    onPickQr() {
      const shopList = this.$refs.page.shopList
      if (shopList.length === 0) {
        this.$message.warning('请先勾选数据！')
        return
      }
      const list = shopList.map(o => {
        return {
          id: o.id,
          name: o.name
        }
      })
      this.$refs.page.setDialog({
        title: '二维码生成',
        width: '80%',
        height: '80%',
        comp: qrPanel,
        props: {
          list: list
        }
      })
    }
  },
  mounted() {
    this.buildYear(0)
  }
}

</script>
<style lang="scss" scoped>
.img-cell {
  height: 50px;
}
</style>
